			<!--
				doc+type
				doc：document
				!DOCTYPE html：声明文档类型为html
			-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
			<!--
				charset：声明文档编码
				uft-8：国际编码
				gb2312：中文编码
			-->
		<meta name="keywords" content="家具，智能家具，智能" />
		<meta name="description" content="网站描述"/>
			<!--
				keywords：设置网页关键词
				作用：提高SEO（搜索引擎优化）
				description：设置网页描述
				作用：提高SEO（搜索引擎优化）
			-->
		<link rel="icon" href="img/bitbug_favicon.ico" />
			<!--link,rel=icon:引入logo-->
		<title>这是我的第N节html</title>
		
		<style type="text/css">
				/**
				 * css样式
				 * 选择器:用来选择具体的标签
				 * p(直接写标签名):标签选择符，选择到所有目标标签
				 * 类选择符（class）：在css中用一个点.表示。可以重复利用
				 **/
				/*
				 * em：相对单位
				 *    相对于该元素自身的姿态大小，比如字体大小为20px，那么1em=20px；
				 * */
			p{
				text-align: center;
			}
			.p2{
				text-align: left;
				text-indent: 2em;/*首行缩进缩进*/
			}
			.sty{
				color:red;
				color: #FF0000;
				color: rgb(255,0,255);
				color: rgba(255,0,255,0.5);/*(a:透明度)*/
				/*(会自动选择最后一个,覆盖前面的)*/
				font-size: 30px;/*字体大小*/
				width: 400px;
				height: 200px;
				border: 1px solid red;/*边框 样式 颜色*/
				line-height:200px;/*
				                   * 当容器只有一行文字时,设置行高等于高可以使得文本垂直居中在容器内
				                   * 行距 行高 行与行之间的距距离
				                   */
				padding:20px ;/*设置容器内边距 即用来设置容器边框到内容的距离*/
				/*margin: 20px;设置容器外边距*/
				margin: auto auto;/*设置居中 第一个值：上下外边距 第二个值：左右外边框*/
			}
		</style>
		
		<!--
			base标签：
				作用：1.定义整个网页的基础地址写在head里面
					2.定义整个网页的a便签跳转页面（淘宝、增加用户体验）
		-->
		<base href="http://192.168.137.1:8090/022/2018.12.27%20HTML%E7%AC%AC%E4%B8%80%E8%8A%82%E8%AF%BE/index.html" />
		<base target="_blank" />
	</head>
	<body>
		<a href="test.html">点击测试base</a>
		<a href="#cent">点击到中部</a>
		<a href="test.html#testbtn">点击到另一个页面</a>
		<h1 align="center">我来了<br/>好的 我知道了</h1>
		<!--
			标签：开始标签和闭合标签构成,内容写在中间 例如:<body>content</body>
			单标签：只有开始标签 <br/>
		-->
		
		<!--
			段落标签
			
			属性：alin：-》设置文本对齐方式
				left（默认）、right、center
		-->
		<p >
			今天发生了什么有趣的事情，跟谁一起约会了？有哪些让你感到幸福的瞬间？
			有那些新的想法？反思自己今天有哪些部分做的不好……只要一个人还有表达的欲望，
			就一定不会缺少书写的内容。这篇文章，可以说介绍的非常详细了：怎么规划手账体
			系？内容页到底应该怎么写？超详细的手账入门指南
		</p>
		<p class="p2">
			往大了说，这种手帐可以引导你走向更丰富充实的人生。想要达到这种效果，你就
			要学会用“以终为始”的方式来规划整个手帐体系。具体怎么操作，可以参考我之前写
			过得这篇文章，可以说介绍的非常详细了：怎么规划手账体系？内容页到底应该怎么写？
			超详细的手账入门指南
		</p>
		<!--
			语义化
			h${h$}*6 按tab键快速输出
			标题（h1-h6）：默认字体加粗
			
		-->
		<h1>h1</h1>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4>h4</h4>
		<h5>h5</h5>
		<h6>h6</h6>
		
		<!--加粗标签-->
		<b>加粗标签</b>
		<strong>也是加粗，强调文本作用（语义化）</strong>
		
		<p>超详细的<strong>手账</strong>入门指南</p>
		
		<!--斜体-->
		<i>斜体标签</i>
		<em>强调作用</em>
		
		<pre>预格式文本标签，
			可按照文本格式进行排版<b>哈哈哈哈</b>
			<u><del><b><em>啊啊啊啊</em></b></del></u>
		</pre>
		
		<mark>定义文本标记 默认背景颜色</mark>
		<del>删除标签</del><br />
		
		<sup>上标</sup>
		<sub>下标</sub><br />
		<u> 下划线</u><br />
		<sup>ha</sup><br/><span>哈</span><br />
		
		<img src="img/bitbug_favicon.ico"/><br />
		<!--
			a标签：用于链接到其他页面
			target：规定跳转方式
				_self：在当前页面打开链接（默认值）
				_blank：在新页面打开链接
			其他运用：
			mailto：邮箱（打开邮箱。需要邮箱软件）
			tel：一键拨打号码
			sms：一键发信息
			
		-->
		<a href="test.html" target="_self">↑╮(╯▽╰)╭↑</a>
		<a href="test.html" target="_blank">↑╮(╯▽╰)╭↑</a>
		<a href="http://www.baidu.com" target="_self">↑╮(╯▽╰)╭↑</a>
		
		
		<a href=“mailto:905545914@qq.com” name="cent">邮件链接(需要邮箱软件)</a>
		<a href="tel:15876848404">一键拨打电话</a>
		<a href="sms:15876848404">一键发短信</a><br />
		
		<p style="height: 500px;"></p>
		
		<a href="" name="btn">点击回到顶部</a><br />
		<!--
			设置锚点跳转：
			1.在目标元素中设置name属性
			2.在点击按钮中的href属性中填写#name即可（这里的name即为上一步命名的名字）
		-->
		
		<!--
			列表（组合标签）：
				无序列表:通常作为导航的容器
				项目符号：type
					square、circle、disc(实心圆 默认)
		-->
		
		
		<!--ul>li{$$$$}*5 无序列表-->
		<ul type="square">
			<li>0001</li>
			<li>0002</li>
			<li>0003</li>
			<li type="none">
				<ul>
					<li>001</li>
					<li>002</li>
				</ul>
			</li>
			<li>0004</li>
			<li>0005</li>
		</ul>
		
		<!--
			有序列表
			type：
				1：阿拉伯数字（默认）
				i：小写罗马数字
				I:大写罗马数字
				A:大写英文字母
				a：小写英文字母
			start:规定项目符号开始的位置（第几个开始算）
		-->
		<!--ol>li{$$$$}*5 有序列表-->
		<ol type="A" start="5">
			<li>0001</li>
			<li>0002</li>
			<li>0003</li>
			<li>0004</li>
			<li>0005</li>
		</ol><br />
		
		
		<!--
			描述列表
		-->
		<dl>
			<dt>html</dt>
			<dd>超文本标记语言</dd>
		</dl>
		
		<!--
			表格table
				tr：行
				td：列
				th：表头
			属性（css控制需要单位）
				border:边框 不用写单位
				cellspacing：单元格之间的距离
				cellpadding：单元格内容到边框之间的距离
				width：宽
				height：高
			单元格之间的合并：
			rowspan：行合并
			colspan：列合并
			
		-->
		<table border="10"width="600" height="600" cellspacing="0" cellpadding="20">
			<tr>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
				
			</tr>
			<tr>
				<td colspan="2">1</td>
				<!--<td>2</td>-->
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
			<tr>
				<td>9</td>
				<td>10</td>
				<td>11</td>
				<td>12</td>
			</tr>
			
		</table><br />
		
		<table border="1"width="200" height="200" cellspacing="0" cellpadding="20">
			<tr>
				<td colspan="3" ></td>
				<td rowspan="3"></td>
			</tr>
			<tr>
				<td rowspan="3"></td>
				<td colspan="2" rowspan="2"></td>
			</tr>
			<tr>
			</tr>
			<tr>
				<td colspan="3"></td>
			</tr>
		</table>
		
		<table border="1"width="600" height="600" cellspacing="0" cellpadding="20">
			<tr>
				<td colspan="3">1</td>
				<td rowspan="3"></td>
			</tr>
			<tr>
				<td rowspan="3">2</td>
				<td rowspan="2" colspan="2">3</td>
			</tr>
			<tr>
			</tr>
			<tr>
				<td colspan="3">5</td>
			</tr>
		</table>
		
		<!--
			图片标签：
				src：图片路径
				alt：当图片无效时 用来代替盖图片的文字描述
				title：鼠标移入时，显示其内容
			常用图片格式：jpg，png，gif
		-->
		<img src="img/bitbug_favicon1.ico" alt="图片加载失败" title=""/>
		<img src="img/bitbug_favicon.ico" width="50" height="50" title="鼠标移入"/><br />
		<img src="img/map.jpg" usemap="#hotmap"/>
		
		<!--
			热区标签：map
		-->
		<map name="hotmap">
			<area shape="rect" coords="183,123,276,204" href="test.html" alt=""/>
			<area shape="circle" coords="481,499,54" href="test.html" alt=""/>
			<area shape="poly" coords="481,499,54" href="test.html" alt=""/>
		</map>
		
		<!--
			audio：
				属性：
					autopaly：自动播放
					control：显示播放器
					loop：循环播放
					proload：预加载（如果使用autoplay属性时，会忽略该属性）
		-->
		<audio src="media/98.mp3 " autoplay controls="controls" preload="auto" <!--loop="loop"-->></audio>
		<audio>
			<source src="media/98.mp3" />
			<source src="media/98.ogg"/>
			对不起，该浏览器不支持音频
		</audio>
		
		<!--
			video：
				属性：
					autopaly：自动播放
					control：显示播放器
					loop：循环播放
					proload：预加载（如果使用autoplay属性时，会忽略该属性）
					muted：禁音
					poster:设置视频封面
		-->
		<video width="800" height="" controls="controls"  muted="muted" poster="img/map.jpg">
			<source src="media/80s.mp4" type="video/mp4"></source>
			<source src="media/80s.ogv" type="video/ogg"></source>
			<source src="media/80s.webm" type="video/webm"></source>
			<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
				<param name="movie" value="myvideo.swf" />
				<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
			</object>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
		</video>
		
		<!--
			实体字符
				大于号：&gt；
				小于号：&lt；
				引号：&quot；
				注册商标：&reg；
				版权：&copy；
				&符号：&amp；
			shfit+enter：换行快捷键
		-->
		&gt;<br />
		&lt;<br />
		&quot;<br />
		&reg;<br />
		&copy;<br />
		&amp;<br />
		
		&lt;br/&gt;<br />
		
		<!--
			元素的类型：
				行内元素： 内容有多少就占多少位置。
				
				块级元素：占满一整行
		-->
		<div>这是一个普通容器</div>
		<span>普通的文本标签</span>
		
		<div class="sty">
			床前明月光，疑是地上霜
		</div>
		
	</body>
</html>
